<template>
	<scroll-view class="scroll" scroll-y="true" :style="height" @scrolltolower="onLoadMore">
		<view  v-if="list" v-for="(item,index) in list" :key="index">
			<list-ltem  @onDetail="onDetails" :data="item"></list-ltem>
		</view>
		<view class="on-data" v-if="onData">暂无工单...</view>
		<view class="on-more" v-if="onMore">没有更多了...</view>
		<page-load v-if="load"></page-load>
	</scroll-view>
</template>

<script>
	import listLtem from "./listItem.vue"
	import { workModule } from "../../modules/workOrder.js"
	import { mapState, mapMutations } from 'vuex'  
	import pageLoad from "../loading/pageLoad.vue"
	
	const Work = new workModule()
	export default {
		components:{
			listLtem,
			pageLoad
		},
		props:{
			height: String,
			worktype: Number
		},
		computed: mapState(['update']),
		data() {
			return {
				list: [],
				num: 1, // 初始化页数
				onMore: false, // 是否没有更多数据
				onData: false,  // 是否没有数据
				load: true
			};
		},
		onLoad() {
			console.log(this.worktype)
			this.getListData(this.num,this.worktype)
		},
		onShow() {
			if(this.update) { // 监听update的值 是否可以重新请求页面数据
				this.list = []
				this.num = 1
				this.getListData(this.num,this.worktype)
			}
		},
		onUnload() { // 监听页面卸载时 初始化list num
			this.list = []
			this.num = 1
		},
		methods:{
			...mapMutations(['onUpdate']),
			
			getListData(num,type) { // 获取工单列表的方法 传入 工单类型 ，及当前请求的 页数
				this.onMore = false
				this.onData = false
				const workData = Work.getWorkTypeData(num,type)
				workData.then((res)=>{
					this.validationData(res.length) // 根据返回的数组长度 判断 当前页面给用户的提示信息
					this.list = this.list.concat(res) // 将原有的数据和新数组进行合并
					this.load = false
				})
			},
			validationData(length){ // 判断数组长度
				if(length == 0) {
					this.onData = true // 没有数据
				}else if(length < 10) {
					this.onMore = true // 没有更多
				}
			},
			onLoadMore(){ // 下拉执行方法  
				// TODO 此处未完 应该加入锁的概念 
				if(this.onMore){ // 没有更多 则下拉不执行
					return
				}
				console.log('加载更多')
				this.num ++ // 每下拉一次，改变当前的页数 保证每次下拉都会加 1
				this.getListData(this.num,this.worktype) 
			},
			
			onDetails(e) { // 父级接受子组件传递过来的参数， 跳转至详情页
				e.state = this.worktype
				const data = JSON.stringify(e)
				uni.navigateTo({
					url: `/pages/workOrder/details/details?data=${data}`
				})
			}
		}
	}
</script>

<style>
	.scroll{
		box-sizing: border-box;
		position: relative;
		background-color: #F7F7F7;
	}
	.on-data {
		position: absolute;
		top: 20%;
		left: 0;
		right: 0;
		margin: auto;
		color: #999;
		font-size: 30upx;
		text-align: center;
	}
	.on-more {
		color: #999;
		font-size: 30upx;
		text-align: center;
		padding: 30upx 0;
	}
</style>
